<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>搜狐视频列表</title>
    <style>
        html,
        body,
        div,
        span,
        button,
        dl,
        dt,
        p,
        img,
        h2 {
            margin: 0;
            padding: 0;
        }
        
        h2 {
            margin: 10px 0;
            padding: 0 20px;
            font-size: 20px;
            color: #4F678A;
        }
        
        .clearfix::after {
            display: block;
            height: 0;
            content: "";
            visibility: hidden;
            clear: both;
        }
        
        #wrapper {
            position: absolute;
            top: 50%;
            left: 50%;
            padding: 0 10px;
            transform: translate(-50%, -50%);
            background-color: #CED8E9;
        }
        
        hr {
            margin-bottom: 10px;
        }
        
        dt {
            padding: 5px;
            width: 306px;
            cursor: pointer;
        }
        
        dt:last-child {
            margin-bottom: 10px;
        }
        
        dt div {
            display: none;
        }
        
        span {
            float: left;
            margin-right: 10px;
            width: 24px;
            background-color: #0E44B9;
            color: #ffffff;
            text-align: center;
        }
        
        p {
            float: left;
        }
        
        div {
            float: left;
            position: relative;
            width: 240px;
        }
        
        img {
            float: left;
            width: 120px;
            height: 80px;
        }
        
        button {
            float: right;
            border: none;
            padding: 2px 5px;
            background-color: #3533BE;
            color: #ffffff;
        }
    </style>
</head>

<body>
    <section id="wrapper">
        <h2>观看排行榜</h2>
        <hr>
        <dl>
            <dt class="clearfix">
                <span>1</span>
                <p>解密：关于地球与人类的一千零一问</p>
                <div>
                    <img src="./img/1.jpg" alt="">
                    <button>打开</button>
                </div>
            </dt>
            <dt class="clearfix">
                <span>2</span>
                <p>经典传奇：探索世界重大历史事件</p>
                <div>
                    <img src="./img/2.jpg" alt="">
                    <button>打开</button>
                </div>
            </dt>
            <dt class="clearfix">
                <span>3</span>
                <p>眼界：展现普通人的曲折命运和动人</p>
                <div>
                    <img src="./img/3.jpg" alt="">
                    <button>打开</button>
                </div>
            </dt>
            <dt class="clearfix">
                <span>4</span>
                <p>档案：惊人事件和传奇背</p>
                <div>
                    <img src="./img/4.jpg" alt="">
                    <button>打开</button>
                </div>
            </dt>
            <dt class="clearfix">
                <span>5</span>
                <p>世界十最：30个震惊世界的Top</p>
                <div>
                    <img src="./img/5.jpg" alt="">
                    <button>打开</button>
                </div>
            </dt>
            <dt class="clearfix">
                <span>6</span>
                <p>身边的毛泽东：警卫员解密和毛主席的</p>
                <div>
                    <img src="./img/6.jpg" alt="">
                    <button>打开</button>
                </div>
            </dt>
            <dt class="clearfix">
                <span>7</span>
                <p>新电影传奇：每一部电影都有自己的</p>
                <div>
                    <img src="./img/7.jpg" alt="">
                    <button>打开</button>
                </div>
            </dt>
            <dt class="clearfix">
                <span>8</span>
                <p>档案（上视纪实频道）：解密档案中</p>
                <div>
                    <img src="./img/8.jpg" alt="">
                    <button>打开</button>
                </div>
            </dt>
            <dt class="clearfix">
                <span>9</span>
                <p>探寻传世国宝的千古传奇</p>
                <div>
                    <img src="./img/9.jpg" alt="">
                    <button>打开</button>
                </div>
            </dt>
            <dt class="clearfix">
                <span>10</span>
                <p>纪实系列：讲述社会百态，透视事实</p>
                <div>
                    <img src="./img/10.jpg" alt="">
                    <button>打开</button>
                </div>
            </dt>
        </dl>
    </section>

    <script>
        var aDt = document.getElementsByTagName('dt');
        var fn = function(dt) {
            console.log(dt);
            console.log(typeof dt);
            var oP = dt.getElementsByTagName('p')[0];
            var oDiv = dt.getElementsByTagName('div')[0];
            dt.onmouseenter = function() {
                oP.style.display = 'none';
                oDiv.style.display = 'block';
            };
            dt.onmouseleave = function() {
                oDiv.style.display = 'none';
                oP.style.display = 'block';
            };
        }
        for (var i = 0; i < aDt.length; i++) {
            fn(aDt[i]);
        }
    </script>
</body>

</html>